<template>
  <div class="hellos">
    <mt-header>
      <router-link to="/home" slot="left">
        <mt-button icon="back">个人中心</mt-button>
      </router-link>
      <div slot="right">
        <router-link tag="span" to="#" class="iconfont icon-sousuo"></router-link>
        <router-link tag="span" to="#" class="iconfont icon-xiazai"></router-link>
        <router-link tag="span" to="#" class="iconfont icon-fenxiang"></router-link>
      </div>
    </mt-header>
    <div class="bann_list">
      <img :src="home_list.src" alt="加载失败" />
      <p class="heana">
        {{home_list.textp}}
        <span>{{home_list.textg}}</span>
      </p>
      <br />
      <p class="heaf">
        {{home_list.textf}}分
        <span>{{home_list.textw}}次下载</span>
      </p>
    </div>
    <div class="chang">
      <v-touch class="xuan_s" tag="div" v-for="(item,id) of home_list.lus" :key="id" align="center">
        <img class="imgs" :src="item" alt />
      </v-touch>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      home_list: []
    };
  },
  methods: {},
  created() {
    //   console.log(this.$route.params.id)
    let home_lis = this.$store.state.auto;
    home_lis.some(e => {
      if (e.id == this.$route.params.id) {
        this.home_list = e;
        return true;
      }
    });
    // console.log(this.home_list)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.chang::-webkit-scrollbar {
  display: none;
}
.chang {
  display: flex;
  width: 100%;
  margin-top: 0.6rem;
  overflow-x: auto;
  .xuan_s {
    flex: 1;
    margin-left: 1rem;

    .imgs {
      width: 11rem;
      height: 15rem;
    }
  }
}
.bann_list {
  width: 100%;
  height: 8rem;
  background-color: #fff;
  img {
    width: 4rem;
    height: 4rem;
    margin-top: 2rem;
    margin-left: 0.5rem;
    float: left;
  }
  .heana {
    color: black;
    display: inline-block;
    font-size: 1rem;
    margin-top: 2.5rem;
    width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
      font-size: 0.8rem;
      background-color: rgb(50, 77, 165);
      color: #fff;
      border-radius: 0.5rem;
      display: inline-block;
      width: 2rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
    }
  }
  .heaf {
    display: inline-block;
    color: rgb(175, 174, 174);
    font-size: 0.5rem;
    margin-top: 0.6rem;
  }
  p {
    margin-left: 0.5rem;
    span {
      margin-left: 0.5rem;
    }
  }
}
.mint-header {
  background-color: #fff;
}
.mint-header-button > a {
  color: black;
}
.mint-header-button.is-right {
  width: 3rem;
  height: 100%;
  span {
    display: inline-block;
    color: black;
    margin-right: 0.5rem;
  }
}
</style>

